<template>
	<div class="attribute-container">
		<div class="head">
			<div>
				<svg aria-hidden="true" class="svg-icon arrow" @click="handleExpand">
					<use v-if="!isExpand" href="#icon-right_arrow_normal"></use>
					<use v-else href="#icon-below_arrow_normal"></use> 
				</svg>
				<span>事件</span>
			</div>
			<div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
				
				<el-tooltip
				        class="box-item"
				        effect="dark"
				        content="同步至场景"
				      >
					<el-icon class="custom-icon" @click="handleExecuteAction"><Position /></el-icon>
				</el-tooltip>
				
				<el-tooltip
				        class="box-item"
				        effect="dark"
				        content="更新组件"
				      >
					<el-icon class="custom-icon" @click="updateAssemblyEvent"><RefreshLeft /></el-icon>
				</el-tooltip>
				
				<el-tooltip
				        class="box-item"
				        effect="dark"
				        content="同步至关联对象"
				      >
					<el-icon class="custom-icon" @click="replaceSameAssemblyActorEvent"><Refresh /></el-icon>
				</el-tooltip>
				
				<el-tooltip
						class="box-item"
						effect="dark"
						content="新增事件"
					  >
					<el-icon class="custom-icon" @click="editMouseEventFieldDialogRef.openDialog({actorId:actorId,product:product},'add')"><Plus /></el-icon>
				</el-tooltip>
			</div>
		</div>
 		<div class="body" v-if="isExpand" style="margin:5px;max-height:250px;">
			<div class="a-row"  v-for=" action in tableData">
				<div>
					<span>{{action.name}}</span>
				</div>
				<div class="right">
					
					<el-tooltip
							class="box-item"
							effect="dark"
							content="编辑"
						>
						<el-icon  @click.stop="editMouseEventFieldDialogRef.openDialog(action,'edit')" :loading="loading"><Edit /></el-icon>
					</el-tooltip>
					
					<el-tooltip
							class="box-item"
							effect="dark"
							content="删除"
						>
						<el-icon  @click.stop="handleDeleteActorAction(action)" :loading="loading"><Delete /></el-icon>
					</el-tooltip>
				</div>
			</div>
			
		</div>	 
		<EditMouseEventFieldDialog  ref="editMouseEventFieldDialogRef" @closeDialog="closeDialog"></EditMouseEventFieldDialog>
		<DesignActorActionDialog  ref="designActorActionDialogRef" @closeDialog="closeDialog"></DesignActorActionDialog>
	</div>
</template>

<script lang="ts" setup>
	import {
	  Edit,Delete,Refresh,Plus,Position,RefreshLeft
	} from '@element-plus/icons-vue'
	import {
	  getActorEventPage,deleteActorEvent,getActorSettingEventInfoByActorId,replaceSameAssemblyActorEventByActorEvent
	} from "@/api/wdp/actor";
	
	import {
		updateAssemblyEventByActor
	} from "@/api/wdp/assembly";
	
	import EditMouseEventFieldDialog from "./components/EditMouseEventFieldDialog.vue";
	import DesignActorActionDialog from "@/components/Actor/components/DesignActorActionDialog.vue";
	
	const editMouseEventFieldDialogRef=ref();
	const designActorActionDialogRef=ref();
	
	const isExpand=ref(false);
	
	const props = defineProps({
		baseUrl: {
			type: String,
			default: () => ''
		},
		actorId: {
			type: String,
			default: () => ''
		},
		state: {
			type: String,
			default: () => ''
		},
		product: {
			type: String,
			default: () => ''
		}
	})
	
	const loading=ref<boolean>(false);
	let tableData=ref<any[]>([])
	const baseUrl = ref<string>('');
	const actorId = ref<string>('');
	
	const handleExpand=()=>{
		isExpand.value=!isExpand.value
		if(isExpand.value==true){
			load();
		}
	}
	
	const load=()=>{
		if(isExpand.value==false){
			return;
		}
		loading.value=true;
		getActorEventPage({
			actorId:actorId.value
		})
		.then((res:any) => {
			tableData.value=res.data;
		})
		.catch((e:any) => {
			console.error(e)
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const handleDeleteActorAction=(data:any)=>{
		ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		.then(() => {
			loading.value=true;
			deleteActorEvent(data.id)
			.then(() => {
				ElMessage.success("成功");
				load();
			})
			.catch((e:any) => {
				console.error(e);
			})
			.finally(() => {
				loading.value=false;
			});
		})
		.catch(() => ElMessage.info("已取消删除"));
	}
	
	const emits = defineEmits(['onchange','execute'])
	
	
	const handleExecuteAction=()=>{
		ElMessageBox.confirm("确认同步此事件信息?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		.then(() => {
			loading.value=true;
			getActorSettingEventInfoByActorId(actorId.value)
			.then((res:any) => {
				emits('execute',res.data)
				ElMessage.success("成功")
			})
			.catch((e:any) => {
				console.error(e);
			})
			.finally(() => {
				loading.value=false;
			});
		})
		.catch(() => ElMessage.info("已取消"));
	}
	
	const replaceSameAssemblyActorEvent=()=>{
		ElMessageBox.confirm("确认使用当前对象样式信息更新使用同一组件的对象样式吗（不可逆）?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		.then(() => {
			loading.value=true;
			replaceSameAssemblyActorEventByActorEvent(actorId.value)
			.then(() => {
				ElMessage.success("成功");
				load();
			})
			.catch((e:any) => {
				console.error(e);
			})
			.finally(() => {
				loading.value=false;
			});
		})
		.catch(() => ElMessage.info("已取消"));
	}
	
	const updateAssemblyEvent=()=>{
		ElMessageBox.confirm("确认使用当前对象事件配置更新组件吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		.then(() => {
			loading.value=true;
			updateAssemblyEventByActor({
				id:actorId.value
			})
			.then(() => {
				ElMessage.success("成功");
				load();
			})
			.catch((e:any) => {
				console.error(e);
			})
			.finally(() => {
				loading.value=false;
			});
		})
		.catch(() => ElMessage.info("已取消"));
	}
	
	const closeDialog=(e:any)=>{
		load();
	}
	
	watch(props,() => {
			baseUrl.value=props.baseUrl;
			actorId.value=props.actorId;
			load();
		},
	    { immediate: true, deep: true },
	)
	
	defineExpose({
	});
	
	onMounted(() => {
	});
</script>

<style scoped>
	.a-row{
		margin-bottom: 2px;
		height: 28px;
		display: flex;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: center;
		padding-left: 8px;
		border-radius: 5px;
		background-color:#161616bd; 
		position: relative;
		font-size: 13px;
		>.right{
			display: flex;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: center;
			align-items: center;
			.el-icon{
				margin-right: 5px;
				font-size: 0.75rem;
				cursor: pointer;
			}
		} 
	}
	.a-row::before {
	    content: "";
	    width: 2px;
	    height: 12px;
	    background-color: #7258e9;
	    position: absolute;
	    left: 0;
	    top: 8px;
	}
</style>